Slide In on Scroll 滾動滑入效果

網頁在滾動過程中，圖片會在滾動到可見視窗內後，從兩側滑動出現，等你滾走後，他會再滑出去．
過程中需要知道滑動到哪裡了，和要滑動出現的圖片位置在哪．

個人codepen

技巧點

1. scroll滾動事件

window.addEventListener("scroll", function);
// 綁定滾動的監聽處理

• 網頁如果本身內容很多，就會需要一直往下滾動，因此會需要一個回到頂部的按鈕，但這個按鈕不會一開始就出現，會等到你滑動到一定程度才蹦出來，就需要監聽scroll

function showGoTopBtn() {
  if (window.scrollY > window.innerHeight) {
    console.log("show");
  } else {
    console.log("disappear");
  }
}
window.addEventListener("scroll", showGoTopBtn);

• scrollY為目前滾動的y軸，相對於視窗頂部上方的距離，也就是網頁旁邊的捲軸捲動了多少距離．
• innerHeight 為網頁可見視窗的高度，參考下方ＭＤＮ的圖片，會比較清楚

2. throttle()節流

• 滾動事件，會一直瘋狂觸發，會對網頁效能造成負擔，這時候就需要寫一個函式讓事件在一定頻率下觸發．就可以達到節省效能．

function throttle(fn, delay = 50) {
  // fn為你在滾度事件中要做的事，delay可以想成每固定多少毫秒數要做這件事
  
  let timer = null;
  // 先設定一個空的定時器
  
  // 回傳一個函式
  return function(...args) {
  // ...args 其餘參數的概念，將不確定數量的參數當作一個陣列傳遞進來
  除了fn, delay之外的都是args，args為一個陣列
  
    if (timer) return;
    // 如果有定時器的話，就中止，這樣就不連續觸發要執行的事件
    
    timer = setTimeout(() => {
      timer = null;
    }, delay);
    // 設定定時器，並且一定時間內清空定時器，就可以等到定時器清除後，才會再次執行你要的函式 
    
    fn.apply(this, args);
    // fn為你傳進來要執行的函式，apply去綁定這個函式，不然會取不到args的值，會變成undefined
  }
}

• 節流在網頁開發中很常用到，像是有滾動加載資料的需求時，每次滾動就會去打api要資料，這樣會發出過多的請求，對前端或後端都是負擔，就需要節流
• 實際開發中，都用Lodash函式庫，非常方便，除了throttle還有搜尋時很常用的debounce＾＾

3. offsetTop

• 可以拿到元素，相對於其父元素的頂部距離，是一個只可讀的屬性

slideIn.forEach((item) => {
    const isShow = (window.scrollY > item.offsetTop - window.innerHeight) && (window.scrollY < item.offsetTop + item.offsetHeight);
    if (isShow) {
      item.classList.add("active");
    } else { 
      item.classList.remove("active");
    }
})

• y軸滾動距離大於該圖片相對於上方的距離減去視窗的高度，這樣當圖片一進入視窗範圍，就可以讓他滑動出現
• 另外滾動距離不能超過該圖片本體相對於上方的距離，如果y軸滾動超過的話，這個圖片就會再次滑動回去消失．

心得

頭好痛，要去計算圖片該出現的時機點，當純想像的話，腦袋當機，只好拿出一張紙出來畫畫看，模擬狀況．
另外那個節流，也不是很好理解，包含到了重要的JS概念，閉包closure還有this指向．
我不行了，先來去打一場傳說對決壓壓驚＾＿^